<template>
  <div>
    <!-- 列表信息-->
    <div class="background-white mess-list mem" v-if="!isEdit&&!isAdd">
      <div class="mess-list-layout">
        <p>培训心得列表</p>
        <div>
          <el-row>
            <el-button type="danger" @click="selectDelete(multipleSelection)">删除</el-button>
            <el-button type="success" @click="addProject">添加培训心得</el-button>
          </el-row>
        </div>
      </div>
      <div style="margin-top: 16px">
        <el-table
          :data="messData"
          ref="multipleTable"
          style="width: 100%"
          :cell-style="{height:49+'px'}"
          :header-cell-style="{background:'#F3F4F7',color:'#999999'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="标题"
            prop="title"
            width='200'
            :show-overflow-tooltip='true'
          >
          </el-table-column>
          <el-table-column
            label="作者"
            prop="author">
          </el-table-column>

          <el-table-column
            label="来源"
            prop="source">
          </el-table-column>
          <el-table-column
            label="浏览量"
            prop="total"
          >
          </el-table-column>
          <el-table-column
            label="是否发布"
          >
            <template slot-scope="scope">
              <i   class="el-icon-check release" v-if="scope.row.isRelese"></i>
              <i  class="el-icon-close no-release" v-else></i>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="date"
          >
          </el-table-column>
          <el-table-column
            label="备注"
            prop="note"
          >
          </el-table-column>
          <el-table-column
            label="管理"
            width="155"
          >
            <template slot-scope="scope">
              <el-button
                size="medium "
                @click="edit(scope.$index, scope.row)">
                <i class="el-icon-edit"></i>
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 30px;text-align: right">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>

    <!--添加或修改-->

    <div v-if="isEdit||isAdd">
      <update :isEdit="isEdit" :isAdd="isAdd" :editObj="editObj" @deleteRow="deleteRow"></update>
    </div>
  </div>

</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import update from "./update";

  export default {
    layout: 'frame',
    name: "index",
    components: {
      update
    },
    beforeUpdate() {
      this.initInfo()
    },
    data() {
      return {

        breadTitle: '培训心得管理',

        editObj: {},//编辑对象

        messData: [
          {
            id: 1,
            title: '柯杨团队建立我国首个“食管癌临床机会性筛查精准',
            author: '孟晚舟',
            source: '贵阳晚报',
            total: 1000,
            date: '2020-02-02 00:00:00',
            isRelese: true,
            note: 'dd'
          }, {
            id: 2,
            title: '柯杨团队建立我国首个“食管癌临床机会性筛查精准',
            author: '孟晚舟',
            source: '贵阳晚报',
            total: 1000,
            date: '2020-02-02 00:00:00',
            isRelese: true,
            note: 'dd'
          },
        ],
        multipleSelection: [],

      }
    },

    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),

      //编辑
      ...mapState({
        isEdit: state => state.filter.isEdit
      }),

      //添加
      ...mapState({
        isAdd: state => state.filter.isAdd
      }),
    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath', 'SetIsEdit', 'SetIsAdd'
      ]),
      //初试化
      initInfo() {
        this.SetIsShowBread(true);  //设置面包屑导航是否显示

        //面包屑显示后内容
        if (this.isShowBread && !this.isEdit && !this.isAdd) {
          this.SetCurrentPath({url: '/', title: this.breadTitle});
        } else if (this.isEdit) {
          this.SetCurrentPath({url: '/', title: '编辑培训心得'});
          this.SetIsEdit(true);
        } else if (this.isAdd) {
          this.SetCurrentPath({url: '/', title: '添加培训心得'});
          this.SetIsAdd(true);
        }
      },

      //编辑
      edit(index, row) {
        this.SetIsEdit(true);
        this.initInfo();
        this.editObj = row;
      },

      //添加
      addProject() {
        this.SetIsAdd(true);
        this.initInfo();
      },

      //列表-批量删除-提示
      selectDelete(rows) {
        if (rows.length > 0) {

          this.$confirm('是否确定删所选培训心得？')
            .then(_ => {
              this.deleteMethod(rows);
            })
            .catch(_ => {
            });
        } else {//无数据的提示
          this.$confirm('请勾选需要删除的培训心得？')
            .then(_ => {
            })
            .catch(_ => {
            });
        }
      },

      //删除
      deleteMethod(rows) {
        rows.forEach((row) => {
          this.messData.forEach((initRow, index) => {
            if (row.id == initRow.id) {
              this.messData.splice(index, 1)
              //请求

            }
          })
        });
      },

      //来自编辑的删除
      deleteRow(options) {
        this.$confirm('是否确定删除该培训心得？')
          .then(_ => {
            let id = options.id;
            this.messData.forEach((initRow, index) => {
              if (id == initRow.id) {
                this.messData.splice(index, 1);
                this.SetIsEdit(false);
                this.initInfo()
                //请求
              }
            })
          })
          .catch(_ => {
          });
      },

      //总操作数据源
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    },

    beforeDestroy() {
      this.SetIsAdd(false);
      this.SetIsEdit(false)
    }
  }
</script>

<style lang="scss">


</style>
